<template>
  <div class="body">
    <div class="play_wrap">
      <!-- 导航条 -->
      <div class="title_wrap">
        <div class="title_right">
          <img src="../comment/img/player_title.png" alt />
        </div>

        <div class="title_left">
          <input
            v-model="query"
            autocomplete="off"
            placeholder="1234567"
            @keyup.enter="searchMusic"
          />
        </div>
      </div>
      <!-- 主题部分 -->
      <div class="content_warp">
        <!-- 音乐歌单部分 -->
        <div class="song_wrapper">
          <ul>
            <li v-for="item in musicList" :key="item.id">
              <a href="#" @click=" playMusic(item.id)"></a>
              <b>{{item.name}}</b>
              <span>
                <!-- @click="" -->
                <i v-if="item.mvid!=0" @click="playMv(item.mvid)"></i>
              </span>
            </li>
          </ul>
          <img src="../comment/img/line.png" alt="图片" />
        </div>
        <!-- 中间磁盘 -->
        <div class="player_con" :class="{'playing':isPlay}">
          <img
            class="play_bar"
            :class="{'bar':isPlay}"
            src="../comment/img/player_bar.png"
            alt="音乐指针"
          />
          <img class="disc autoRotate" src="../comment/img/disc.png" alt="唱片磁盘" />
          <img
            class="cover autoRotate"
            :src="coverUrl==''? '../comment/img/cover.png' :coverUrl"
            alt="唱片名片"
          />
        </div>
        <div class="comment_wrapper">
          <img src="../comment/img/line.png" alt="图片" />
          <h2>热门留言</h2>
          <div class="comment_list">
            <dl>
              <dt>
                <img src="../comment/img/person.png" />
              </dt>
              <dd class="name">名字</dd>
              <dd class="detail">afassssssss</dd>
            </dl>
          </div>
        </div>
      </div>
      <!-- 下方音乐条 -->
      <div class="floot_warp">
        <audio
          ref="audio"
          @play="isPlays"
          @pause="pause"
          :src="musicUrl"
          controls
          autoplay
          loop
          class="myaudio"
        ></audio>
      </div>
     
    </div>
    
  </div>
</template>

<script>
export default {
  name: "muisc",
  data() {
    return {
      //查询关键字
      query: "",
      //存放歌曲的数组
      musicList: [],
      //公用url
      comAxios: "https://autumnfish.cn",
      // 歌曲url
      musicUrl: "",
      // 是否正在播放
      isPlay: false,
      // 歌曲热门评论
      hotComments: [],
      // 歌曲封面地址
      coverUrl: "",
      // 显示视频播放
      showVideo: false,
      // mv地址
      mvUrl: ""
    };
    //    url:'https://autumnfish.cn/search?keywords=' + 123,
  },
  methods: {
    /* 不能使用箭头函数  坑坑坑坑 */
    /* 搜索歌曲 */
    searchMusic: function() {
      this.axios({
        url: this.comAxios + "/search?keywords=" + this.query,
        method: "get"
      }).then(res => {
        /*// 保存内容  */
        this.musicList = res.data.result.songs;
      });
      this.query = "";
    },
    /* // 播放歌曲 */
    playMusic: function(musicId) {
      this.axios.get(this.comAxios + "/song/url?id=" + musicId).then(res => {
        console.log(res);
        this.musicUrl = res.data.data[0].url;
      });
      // 获取歌曲封面
      this.axios
        .get(this.comAxios + "/song/detail?ids=" + musicId)
        .then(response => {
          // console.log(response)
          // 设置封面
          this.coverUrl = response.data.songs[0].al.picUrl;
        });
    },
    // audio的play事件
    isPlays: function() {
      this.isPlay = true;
      this.mvUrl = "";
    },
    // audio的pause事件
    pause: function() {
      this.isPlay = false;
    },
    /* mv */
    playMv: function(vid) {
      if (vid) {
        this.showVideo = true;
        this.axios.get(this.comAxios + "/mv/url?id=" + vid).then(res => {
          this.$refs.audio.pause();
          this.mvUrl = res.data.data.url;
        });
      }
    },
    // 关闭mv界面
    closeMv: function() {
      this.showVideo = false;
      this.$refs.video.pause();
    }
  }
};
</script>
<style >
@import url("../comment/css/index.css");
</style>